<template>
    <div>
        <el-form :model="formData" label-width="120px">
            <div v-for="item in formData" :key="item.id">
                <el-form-item :label="'id：' + item.id">
                    <el-input v-if="item.type === 'EditText'" v-model="item.content"></el-input>
                    <el-checkbox v-else-if="item.type === 'CheckBox'" v-model="item.checked">CheckBox</el-checkbox>
                    <el-select v-else-if="item.type === 'Spinner'" v-model="item.selected">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                    </el-select>
                    <el-radio v-else-if="item.type === 'RadioButton'" v-model="item.checked"
                        :label="item.checked">RadioButton</el-radio>
                </el-form-item>
            </div>
            <el-button type="primary" @click="submitForm">上传</el-button>
        </el-form>
    </div>
</template>
  
<script>
import { getConfig, uploadConfig } from '@/api/config';
export default {
    data() {
        return {
            formData: []
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            getConfig()
                .then(data => {
                    this.formData = data;
                });
        },
        submitForm() {
            uploadConfig(this.formData)
                .then(data => {
                    console.log(data);
                    if(data.status == "success"){
                         this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    }
                   
                });
        }
    }
};
</script>